<template>
  <div class="follow_container">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="'我的关注('+followLength+')'" name="follow">
        <div class="msg_list" v-for="(item,index) in followList" :key="index">
          <router-link tag="a" :to="{path:'/centerT',query:{id:item.userName}}">
            <el-avatar :src="item.imgUrl" style="width:40px;height:40px;margin-left:15px;"></el-avatar>
            <div class="center">
              <div class="name">{{item.userName}}</div>
            </div>
          </router-link>
          <div class="follow">
            <el-button size="mini" @click="follow(0,index)">取消关注</el-button>
          </div>
        </div>
        <i class="el-icon-loading" v-if="isLoad" style="font-size:40px;margin:130px 250px;"></i>
      </el-tab-pane>
      <el-tab-pane :label="'我的粉丝('+fansLength+')'" name="second">
        <div class="msg_list" v-for="(item,index) in fansList" :key="index">
          <router-link tag="a" :to="{path:'/centerT',query:{id:item.userName}}">
            <el-avatar :src="item.imgUrl" style="width:40px;height:40px;margin-left:15px;"></el-avatar>
            <div class="center">
              <div class="name">{{item.userName}}</div>
            </div>
          </router-link>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: ['userinfos'],
  data() {
    return {
      followList: [],
      fansList: [],
      followLength: '',
      fansLength: '',
      activeName: 'follow',
      isLoad: true // 加载是否完成
    }
  },
  methods: {
    // 1为关注，0为取消
    async follow(flag, index) {
      const res = await this.$http.post('/follow', {
        flag: flag,
        userName: this.followList[index].userName,
        follow: this.userinfos.userName
      })
      if (res.meta.status !== 200) {
        return this.$Message.error('服务器错误')
      }
      this.followList.splice(index, 1)
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoad = false
      var follows = this.userinfos.follow
      this.followLength = follows.length
      follows.forEach(item => {
        this.comm.getuserInfo(item).then(data => {
          this.followList.push(data)
        })
      })
      var fans = this.userinfos.fans
      this.fansLength = fans.length
      fans.forEach(item => {
        this.comm.getuserInfo(item).then(data => {
          this.fansList.push(data)
        })
      })
    }, 500)
  }
}
</script>
<style lang="less" scoped>
.follow_container {
  height: 90%;
  display: flex;
  flex-direction: column;
  h2 {
    align-items: center;
  }
}
.title {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.msg_list {
  display: flex;
  border-bottom: 1px solid #f4f4f5;
  width: 100%;
  height: 60px;
  a {
    display: flex;
    width: 100%;
    padding-top: 10px;
    .center {
      display: flex;
      flex-direction: column;
      margin-left: 15px;
      .name {
        margin: 5px 0;
        font-size: 14px;
      }
      .msg {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .follow {
    margin-left: auto;
    margin-top: 0px;
    color: #999;
  }
  .el-button {
    margin-top: 25px;
  }
}
.msg_list:hover {
  background-color: #f4f4f5;
}
.el-divider--horizontal {
  margin: 10px 0 0 0;
}
</style>
